<template>
  <div id="app" class="login_container">
    <!--logo-->
    <div class="baidu_logo">
      <img src="../assets/baidu_main_logo.png" alt="">
    </div>
    <!--标题-->
    <div class="mod-new-reg-text">
      <h3>用科技</h3>
      <p>让复杂的世界更简单</p>
    </div>
    <!--帮助中心-->
    <div class="mod-new-reg-footer">
        <span class="mod-new-reg-help">
            <a class="mode-new-reg-help-text" href="#" target="_blank">帮助中心</a>
        <span class="mod-new-reg-line"></span>
            <a class="mod-new-reg-service" href=""></a>
        </span>
      <span class="mod-new-reg-copyright">2021&nbsp;©Baidu</span>
    </div>

    <!--表单-->
    <div class="mod-reg clearfix mod-reg- mod-new-reg-content ">
      <!--表单标题-->
      <div class="new-reg-guide-login">
        <h3>欢迎登录</h3>
        <p>还未注册？
          <span id="login_btn" >
            <a href="#/register"><router-link :to="{name:'Register'}">注册</router-link></a>
            </span>
        </p>
      </div>
      <div class="reg-content tang-pass-reg" id="reg_content">
        <form autocomplete="off" id="" class="new-reg-v5" method="POST" style="margin-top: 40px">
          <el-form :model="UserInfo" status-icon :rules="rules" ref="UserInfo" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" style="margin-bottom: 30px">
              <el-input  class="input" type="text" v-model="UserInfo.idCard" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!--            <el-form-item label="手机号" prop="phone" style="margin-bottom: 30px">-->
            <!--              <el-input class="input" type="text" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="密码" prop="pass" style="margin-bottom: 30px">
              <el-input class="input" type="password" v-model="UserInfo.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="button" style="margin-left: -50px;" type="primary" @click="submitForm()">登&nbsp;&nbsp;录</el-button>
              <el-button class="button" style="margin-top: 10px;margin-left: -50px;" @click="resetForm()">重&nbsp;&nbsp;置</el-button>
            </el-form-item>
          </el-form>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import token from "../components/token.vue"
  export default {
    name: "Login",
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          // if (this.ruleForm.checkPass !== '') {
          //   this.$refs.ruleForm.validateField('checkPass');
          // }
          // callback();
        }
      };
      var username = (rule,value,callback)=>{
        if(value===''){
          callback(new Error('请输入用户名'));
        }
      };

      var phone = (rule,value,callback)=>{
        if(value===''){
          callback(new Error('请输入电话'));
        }
      };

      return {
         UserInfo:{
           idCard: '',
           password: ''
         },
        rules: {
          username: [
            { validator: username, trigger: 'blur' }
          ],
          phone: [
            { validator: phone, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
        }
      };
    },
    methods:{
      resetForm() {
        this.UserInfo.idCard = ''
        this.UserInfo.password = ''
      },
      submitForm() {
        let _this = this
        this.$axios.post("http://localhost:8087/user/login",this.UserInfo).then(function(res){
          if (res.data!=-1){
            alert("登陆成功")
           _this.$router.push({name:'Index',query:{id:res.data}})
           localStorage.setItem("id",res.data)
           token.type = 1
           console.log("登录："+localStorage.getItem("id"))
          } else {
            alert("登陆失败")
          }
        })
        this.resetForm()
      }
    }
  }
</script>

<style scoped>

  .login_container{
    position: fixed;

    background: url("../assets/reg_bg_min.jpg") no-repeat;
    background-size: cover;
  }
  .baidu_logo img{
    margin-top: 50px;
    margin-left: 70px;
    height: 38px;
    width: 124px;
  }

  .mod-new-reg-text {
    position: fixed;
    left: 195px;
    top: 314px;
    color: #fff;
  }

  div {
    display: block;
  }

  .mod-new-reg-text h3 {
    font-size: 54px;
    letter-spacing: 0;
    font-weight: 700;
  }

  .mod-new-reg-text p {
    font-size: 32px;
    letter-spacing: 3.81px;
    font-weight: 300;
  }

  /*帮助中心*/
  .mod-new-reg-footer {
    position: fixed;
    left: 70px;bottom: 57px;
    font-size: 14px;
    color: #fff;
  }

  .mod-new-reg-footer .mod-new-reg-help .mode-new-reg-help-text {
    filter: alpha(opacity=80);
    opacity: .8;
  }

  .mod-new-reg-footer .mod-new-reg-help a {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  a {
    text-decoration: underline;
    color: #00c;
  }
  a {
    text-decoration: none;
    color: #2b78e4;
  }

  a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
  }
  .mod-new-reg-footer {
    position: fixed;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
  }
  body {
    font-family: PingFang-SC-Regular,Helvetica,"Microsoft Yahei","微软雅黑";
  }


  .mod-new-reg-footer .mod-new-reg-help .mod-new-reg-line {
    display: inline-block;
    width: 2px;
    height: 12px;
    filter: alpha(opacity=78);
    opacity: .78;
    margin: 0 12px 0 13px;
    background: #fff;
    position: relative;
    top: 1px;
  }

  .mod-new-reg-footer {
    position: fixed;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
  }
  .mod-new-reg-footer .mod-new-reg-help a {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  .mod-new-reg-service {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../assets/service.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 3px;
  }

  .mod-new-reg-footer .mod-new-reg-copyright {
    filter: alpha(opacity=54);
    opacity: .54;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    padding-left: 30px;
  }
  .mod-new-reg-footer {
    position: fixed;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
  }


  /*form表单*/
  .mod-new-reg-content {
    height: 554px;
  }

  .mod-new-reg-content {
    position: absolute;
    right: 139px;
    width: 480px;
    background: #fff;
    background: rgba(255,255,255,.9);
    border-radius: 12px;
    overflow: hidden;
  }

  .mod-new-reg-content .new-reg-guide-login {
    margin: 30px 0 0 39px;
  }


  .mod-new-reg-content .new-reg-guide-login h3 {
    font-size: 36px;
    color: #000;
    padding-bottom: 4px;
  }

  .mod-new-reg-content .new-reg-guide-login p {
    font-size: 14px;
    color: #9B9B9B;
  }

  .mod-new-reg-content .new-reg-guide-login p span {
    color: #2e58ff;
    cursor: pointer;
  }

  .input{
    height: 50px;
    width: 340px;
  }
  .button{
    border-radius: 30px;
    height: 50px;
    width: 400px;
  }
</style>
